<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <title>Login</title>
  <style>
    body {
      background-size: cover;
      background-image: url('/static/images/home_background.jpg');
    }

    ul {
      list-style: none;
      padding: 0;
    }

    .main {
      margin-top: 8rem;
      text-align: center;
    }

    .p_f {
      font-family: 'Courier New', Courier, monospace;
      color: rgb(4, 97, 4);
      font-size: 35px;
    }

    .p_s {
      color: rgb(4, 97, 4);
      font-family: 'Courier New', Courier, monospace;
      font-size: 35px;
    }

    .form {
      width: 55%;
      margin: 0 auto;
      border-radius: 1rem;
    }

    .form > ul > li {
      display:flex;
      align-items:center;
    }

    .img{
      width: 2rem;
      height: 2rem;
    }

    .ipt {
      width: 85%;
      text-align: center;
    }

    .check {
      float: left;
    }

    .check>input[type='checkbox'] {
      margin: 0;
      margin-left: 0.2rem;
      border-color: #c0cac6;
    }

    .check>p {
      display: inline-block;
      font-size: small;
      margin: 0;
    }

    .loginBtn{
      margin-top: 32px;
      margin-left: -88px;
      font-size: larger;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-1 col-md-2 col-lg-3"></div>
      <div class="col-sm-10 col-md-8 col-lg-6 main">
        <p class="p_f">青丙拾光</p>
        <p class="p_s">后台管理系统</p>
        <form onsubmit="login(this);return false;" autocomplete="off" class="form">
          <ul>
            <li>
              <img src="/static/images/user.png" alt="" class="img">
              <input type="text" name="username" oninput="cacheInput(this);" placeholder="请输入账号" required class="ipt" />
            </li>
            <li>
              <img src="/static/images/lock.png" alt="" class="img">
              <input type="password" name="passwd" oninput="cacheInput(this);" placeholder="请输入密码" required class="ipt"
                id="pass" />
            </li>
            <li class="check">
              <input type="checkbox" onclick="checkit(this.checked)">
              <p>&nbsp;&nbsp;&nbsp;显示密码</p>
            </li>
          </ul>
          <input type="submit" value="登录" class="loginBtn" />
        </form>
        <p>
          <a href="/" style="font-weight: bold;">回到首页</a>
        </p>
      </div>
      <div class="col-sm-1 col-md-2 col-lg-3"></div>
    </div>
  </div>

  <script>
    function checkit(isChecked) {
      if (isChecked) {
        $("#pass").prop("type", 'text');
      } else {
        $("#pass").prop("type", 'password');
      }
    }
  </script>

  <script>
    if (localStorage.getItem('token')) {
      try {
        let u = localStorage.getItem('userinfo')
        if (u) {
          let uinfo = JSON.parse(u)
          if (uinfo.expires + uinfo.time > Date.now()) {
            location.href = '/user'
          }
        }
      } catch (err) {
        console.error(err)
      }
    }

    let loginfo = {
      username: '',
      passwd: ''
    }

    function cacheInput(t) {
      if (t.name === 'username') {
        loginfo.username = t.value.trim()
      } else if (t.name === 'passwd') {
        loginfo.passwd = t.value
      }
    }

    function login(t) {
      if (loginfo.username === '' || loginfo.passwd === '') {
        return
      }

      fetch('/login', {
        method: 'POST',
        headers: {
          'content-type': 'text/plain'
        },
        body: JSON.stringify(loginfo)
      }).then(async res => {

        if (!res.ok) {
          let errtext = await res.text()
          throw new Error(`${res.status} : ${errtext}`)
        } else {
          return res.json()
        }

      }).then(d => {

        localStorage.setItem('token', d.token)
        localStorage.setItem('userinfo', JSON.stringify(d.userinfo))

        location.href = '/user'

      }).catch(err => {
        alert(err.message)
      })

    }
  </script>
</body>

</html>